  <template lc_id="KCiR9cYJ8P">
      <div lc_id="Quld4HtbiZ">
          <div lc_id="JpTYTNBzEe">
              <div class="demonstration-element" lc_id="5yst4mGOV4">Layout 布局</div>
              <el-row lc_id="RDMHdYfJZT" lc-mark>
                  <el-col :span="24" lc_id="XCXYpAliTH">
                      <div class="grid-content bg-purple-dark" lc_id="Q3pyBv0yQL"></div>
                  </el-col>
              </el-row>
              <el-row lc_id="NNsSl/0P/J" lc-mark>
                  <el-col :span="12" lc_id="ik3y978rcp">
                      <div class="grid-content bg-purple" lc_id="m3rjlW975n"></div>
                  </el-col>
                  <el-col :span="12" lc_id="wmew/CNtQO">
                      <div class="grid-content bg-purple-light" lc_id="q9JDM10/IT"></div>
                  </el-col>
              </el-row>
              <el-row lc_id="GFwwG6ghFo" lc-mark>
                  <el-col :span="8" lc_id="0YT4QBLtTF">
                      <div class="grid-content bg-purple" lc_id="hpH8XVnCDp"></div>
                  </el-col>
                  <el-col :span="8" lc_id="75j4FQBj12">
                      <div class="grid-content bg-purple-light" lc_id="C/i2L9sIfj"></div>
                  </el-col>
                  <el-col :span="8" lc_id="r9Q5Xv5maF">
                      <div class="grid-content bg-purple" lc_id="ewyMhNwR6d"></div>
                  </el-col>
              </el-row>
              <el-row lc_id="TGg1ilWwDC" lc-mark>
                  <el-col :span="6" lc_id="zhlSX3rR1s">
                      <div class="grid-content bg-purple" lc_id="i72CkFCaxP"></div>
                  </el-col>
                  <el-col :span="6" lc_id="NGEEvGtT6b">
                      <div class="grid-content bg-purple-light" lc_id="1wPVHPytz5"></div>
                  </el-col>
                  <el-col :span="6" lc_id="5B66ihgyQV">
                      <div class="grid-content bg-purple" lc_id="nGJUxZOYaY"></div>
                  </el-col>
                  <el-col :span="6" lc_id="Jnh3LKyyBk">
                      <div class="grid-content bg-purple-light" lc_id="C3mr7GCJCp"></div>
                  </el-col>
              </el-row>
              <el-row lc_id="FfE34D+quR" lc-mark>
                  <el-col :span="4" lc_id="HqC4QfXfTK">
                      <div class="grid-content bg-purple" lc_id="NRyP+QJeKT"></div>
                  </el-col>
                  <el-col :span="4" lc_id="0/hMidvlgB">
                      <div class="grid-content bg-purple-light" lc_id="ni6mKUYv9J"></div>
                  </el-col>
                  <el-col :span="4" lc_id="/1mTPqxtpo">
                      <div class="grid-content bg-purple" lc_id="y62SKNzieE"></div>
                  </el-col>
                  <el-col :span="4" lc_id="LjWQqmPTg/">
                      <div class="grid-content bg-purple-light" lc_id="yGYelo1dP7"></div>
                  </el-col>
                  <el-col :span="4" lc_id="Vu2aVQiqIx">
                      <div class="grid-content bg-purple" lc_id="b054Y4DJeB"></div>
                  </el-col>
                  <el-col :span="4" lc_id="E2rYxtm/qD">
                      <div class="grid-content bg-purple-light" lc_id="KOOA8s6rOL"></div>
                  </el-col>
              </el-row>
          </div>
          <div lc_id="zXc6Fq0841">
              <div class="demonstration-element" lc_id="SBZzIUSzTK">Layout 分栏间隔布局</div>
              <el-row :gutter="20" lc-mark lc_id="VZsac7yKoo">
                  <el-col :span="6" lc_id="WNvXYnn1Jh">
                      <div class="grid-content bg-purple" lc_id="ZTJoF+cmoa"></div>
                  </el-col>
                  <el-col :span="6" lc_id="U1LTx3WbXw">
                      <div class="grid-content bg-purple" lc_id="UwNQIlRIzl"></div>
                  </el-col>
                  <el-col :span="6" lc_id="iMlxvMwEAH">
                      <div class="grid-content bg-purple" lc_id="soX5vi3Iyo"></div>
                  </el-col>
                  <el-col :span="6" lc_id="s5vO3hDAg9">
                      <div class="grid-content bg-purple" lc_id="0y9r0LzJ4L"></div>
                  </el-col>
              </el-row>
          </div>
          <div lc_id="pCMW7dgNrQ">
              <div class="demonstration-element" lc_id="f8OXr3g1YW">Layout 混合布局</div>
              <el-row :gutter="20" lc-mark lc_id="Zq7py9AGsn">
                  <el-col :span="16" lc_id="neOUpgtdVA">
                      <div class="grid-content bg-purple" lc_id="qikR4Vzu0f"></div>
                  </el-col>
                  <el-col :span="8" lc_id="zlBPWg1V7a">
                      <div class="grid-content bg-purple" lc_id="iLBVThoOoc"></div>
                  </el-col>
              </el-row>
              <el-row :gutter="20" lc-mark lc_id="YC+S7VupJs">
                  <el-col :span="8" lc_id="ABLkZSuGPS">
                      <div class="grid-content bg-purple" lc_id="nDJd5yM8Nr"></div>
                  </el-col>
                  <el-col :span="8" lc_id="/Deo/nfRdM">
                      <div class="grid-content bg-purple" lc_id="LnW2OQ2NVq"></div>
                  </el-col>
                  <el-col :span="4" lc_id="vf0CYfffSU">
                      <div class="grid-content bg-purple" lc_id="Eibajf6Ar2"></div>
                  </el-col>
                  <el-col :span="4" lc_id="XqrufGjyFK">
                      <div class="grid-content bg-purple" lc_id="6CDgh9dRiB"></div>
                  </el-col>
              </el-row>
              <el-row :gutter="20" lc-mark lc_id="v6mXva7Ifr">
                  <el-col :span="4" lc_id="GrGSA1uKJv">
                      <div class="grid-content bg-purple" lc_id="0x2kjflvjy"></div>
                  </el-col>
                  <el-col :span="16" lc_id="9YsDY7Y6M4">
                      <div class="grid-content bg-purple" lc_id="jy3k/ylVM5"></div>
                  </el-col>
                  <el-col :span="4" lc_id="vbEJZx5KlA">
                      <div class="grid-content bg-purple" lc_id="JPRghBbcwh"></div>
                  </el-col>
              </el-row>
          </div>
      </div>
  </template>
  <script>
export default {
  data() {
    return {};
  },
  methods: {},
};  </script>
  <style scoped>.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6 !important;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}</style>
